<template>
	<view class="home">
		<u-navbar :autoBack="true" :placeholder="true" title="达人等级" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="head">
			<view class="head-top">
				<image class="crown" src="https://m.lqvvvv.com/images/sage/crown1.png" mode=""></image>
				<view class="head-text">
					达人等级
				</view>
				<image class="grade" v-if="userinfo.friend_level == 0" src="https://m.lqvvvv.com/images/vip1.png"
					mode=""></image>
				<image class="grade" v-if="userinfo.friend_level == 1" src="https://m.lqvvvv.com/images/vip2.png"
					mode=""></image>
				<image class="grade" v-if="userinfo.friend_level == 2" src="https://m.lqvvvv.com/images/vip3.png"
					mode=""></image>
				<image class="grade" v-if="userinfo.friend_level == 3" src="https://m.lqvvvv.com/images/vip4.png"
					mode=""></image>
			</view>
			<view class="task-title">
				任务进度
			</view>
			<view class="progress" v-if="info.all_num">
				<u-line-progress height="15" activeColor="#FF6CA4" inactiveColor="#fff" :percentage="info.all_num"
					:showText="false"></u-line-progress>
			</view>
			<view class="num">
				<view>
					0
				</view>
				<view v-if="userinfo.friend_level == 0">
					1
				</view>
				<view v-if="userinfo.friend_level == 1">
					50
				</view>
				<view v-if="userinfo.friend_level == 2">
					150
				</view>
				<view v-if="userinfo.friend_level == 3">
					999
				</view>
			</view>
			<view class="next" v-if="userinfo.friend_level < 3">
				<view>
					下一等级
				</view>
				<image v-if="userinfo.friend_level == 0" src="https://m.lqvvvv.com/images/vip2.png" mode="">
				</image>
				<image v-if="userinfo.friend_level == 1" src="https://m.lqvvvv.com/images/vip3.png" mode="">
				</image>
				<image v-if="userinfo.friend_level == 2" src="https://m.lqvvvv.com/images/vip4.png" mode="">
				</image>
			</view>
		</view>
		<view class="bottom">
			<view class="title">任务简介</view>
			<view class="box">
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text" v-if="userinfo.friend_level == 0">
						初级达人完成1个订单升级中级达人
					</view>
					<view class="item-text" v-if="userinfo.friend_level == 1">
						中级达人完成50个订单升级高级达人
					</view>
					<view class="item-text" v-if="userinfo.friend_level == 2">
						高级达人完成150个订单升级明星达人
					</view>
					<view class="item-text" v-if="userinfo.friend_level == 3">
						您已成为明星达人
					</view>
				</view>
				<!-- <view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						中级达人完成1个订单
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						高级达人完成50个订单
					</view>
				</view> -->
			</view>
			<!-- <u-tabs :list="tabList" :itemStyle="itemStyle" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"
				@click="cutTabs"></u-tabs> -->
			<!-- <view class="box" v-if="status == 0">
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						开启接单时间超过3小时，5小时，8小时
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						每日首单
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						每日获得礼物
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						每日接单礼物金额换算积分
					</view>
				</view>
			</view>
			<view class="box" v-if="status == 1">
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						开启接单超过56小时
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						接单数量超过7单
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						礼物数量超过7个
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						五星好评超过5个
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						线上接单1次
					</view>
				</view>
			</view>
			<view class="box" v-if="status == 2">
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						接单时长超过90小时
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						礼物数量超过50
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://m.lqvvvv.com/images/sage/crown1.png" mode="widthFix"></image>
					</view>
					<view class="item-text">
						线上接单次数超过7次
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: '任务简介',
					},
					// {
					// 	name: '每周任务',
					// }, {
					// 	name: '每月任务'
					// },
				],

				inactiveStyle: {
					color: '#b4a9bf',
				},
				activeStyle: {
					color: '#1D1A2D'
				},
				itemStyle: {
					width: '33%',
					height: '70rpx',
					fontWeight: 'bold',
					fontSize: '32rpx'
				},
				status: 0,
				userinfo: {},
				info: {}
			}
		},
		onLoad() {
			this.postuserinfo()

		},
		methods: {
			postinfo() {
				let params = {}
				this.$Request({
					method: 'POST',
					url: '/api/user/getUserPlayLevel',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.info = res.data
						if (this.userinfo.friend_level == 0) {
							this.info.all_num = this.info.all_num / 1 * 100
						}
						if (this.userinfo.friend_level == 1) {
							this.info.all_num = this.info.all_num / 50 * 100
						}
						if (this.userinfo.friend_level == 2) {
							this.info.all_num = this.info.all_num / 150 * 100
						}
						if (this.userinfo.friend_level == 3) {
							this.info.all_num = 100
						}
						console.log(this.info, 111111)
					}
				})
			},
			postuserinfo() {
				let params = {}
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
						this.postinfo()
					} else {
						this.userinfo = {}
					}
				})
			},
			cutTabs(item) {
				this.status = item.index
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7FC;
	}
</style>
<style lang="scss" scoped>
	.home {
		background-image: url('https://m.lqvvvv.com/images/sage/bottom-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 300rpx;
		min-height: 100vh;
		padding: 20px;

		.head {
			margin-top: 20rpx;
			height: 100%;
			background-image: url('https://m.lqvvvv.com/images/sage/head-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 25rpx;

			.head-top {
				display: flex;
				align-items: center;

				.crown {
					width: 77.39rpx;
					height: 76.22rpx;
				}

				.head-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3B37;
					margin-left: 10rpx;
				}

				.grade {
					width: 176rpx;
					height: 60rpx;
					margin-left: 20rpx;
				}
			}

			.task-title {
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				margin-top: 30rpx;
			}

			.progress {
				padding: 10rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;
			}

			.num {
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin-top: 20rpx;
			}

			.next {
				margin-top: 30rpx;
				font-weight: 700;
				font-size: 24rpx;
				color: #000000;
				padding: 20rpx;
				border-radius: 30rpx;
				background-color: rgba(87, 85, 242, 0.13);
				display: flex;
				align-items: center;

				image {
					width: 176rpx;
					height: 60rpx;
					margin-left: 20rpx;
				}
			}
		}

		.bottom {
			background-image: url('https://m.lqvvvv.com/images/sage/bottom-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 150rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;
			padding: 20rpx;
			background-color: #fff;

			.title {
				padding: 10rpx;
				font-size: 28rpx;
				flex-wrap: wrap;
			}

			.box {
				margin-top: 20rpx;

				.item {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.item-left {
						padding: 20rpx;
						border-radius: 20rpx;
						background-color: #EAF3FF;

						image {
							width: 43rpx;
							height: 43rpx;
						}
					}

					.item-text {
						margin-left: 20rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D1A2D;
					}
				}
			}
		}
	}
</style>